
"use strict";

//导入头文件
import React, { Component, PropTypes } from 'react';
import { AppRegistry, View, Text, TextInput, ListView, StyleSheet, Image, NavigatorIOS, TouchableHighlight, AlertIOS, RefreshControl } from 'react-native';

// 工作详情 类
export default class WorkflowDetail extends Component {

  // 初始化数据
  constructor(props) {
    super(props);
    
    const ds = new ListView.DataSource({
      getSectionData: (dataBlob,sectionID) => dataBlob[sectionID],
      getRowData: (dataBlob,sectionID,rowID) => dataBlob[ sectionID +':'+rowID ],
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2});
    this.state = {
      dataSource: ds,
      isRefreshing:false
    };
  }

  componentDidMount() {
    this._headerRefresh();
  }

  _headerRefresh() {
    this.setState({isRefreshing:true});

    var url = 'http://121.199.53.201:7008/Liems/webservice/getBusinessDetail?detailtype=done&limit=20&page=1&pgmId=B1OAM08100&pkValue=' + this.props.pkValue +'&tblName=STMPUSEMST&userId=DANGHUI';

    fetch(url, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  }).then((response) => response.json())
      .then((responseJson) => {
        this.setState({isRefreshing:false});

        // console.error(responseJson);

        var dataBlob = {};
        var sectionIDs = [];
        var rowIDs = [[],[]];

        dataBlob['0'] = this.props.pgmNam;
        //添加基本信息
        for (var i = 0; i < responseJson.root.length; i++) {
          rowIDs[0].push(i);
          dataBlob['0:'+i] = responseJson.root[i];
        }
        rowIDs[0].push('footer');
        sectionIDs.push(0);


        dataBlob['1'] = this.props.pgmNam;

        var childs = [];
        for (var i = 0; i < responseJson.child.rows.length; i++) {
          childs = childs.concat(responseJson.child.rows[i]);
        }

        //添加明细
        for (var i = 0; i < childs.length; i++) {
          rowIDs[1].push(i);
          dataBlob['1:'+i] = childs[i];
        }
        sectionIDs.push(1);

        // AlertIOS.alert(rowIDs);
        // console.error(dataBlob);
        // this.setState({dataSource:this.state.dataSource.cloneWithRows(responseJson.root)});
        this.setState({dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)});
      })
      .catch((error) => {
        this.setState({isRefreshing:false})
        console.error(error);
      });
  }

  renderHeader() {
      return (
      <View style={styles.renderHeader}>
        <View style={styles.sectionHeaderContent}>
            <Text style={styles.sectionHeaderText}>
              {this.props.pgmNam}
            </Text>
            <View style={styles.sectionHeaderLine}>
            </View>
        </View>
      </View>
    )
  }

  // 表头
  sectionHeader(sectionData,sectionID){

    if (sectionID == 1) {
      return (
      <View style={styles.sectionHeader}>
        <View style={styles.sectionHeaderContent}>
            <Text style={styles.sectionHeaderText}>
              {sectionData}明细
            </Text>
            <View style={styles.sectionHeaderLine}>
            </View>
        </View>
      </View>
    )
    } else {
      return (
        <View style={{height:0}} >
        </View>
      )
    }
  }

  // 列表数据
  cellForRow(rowData,sectionID,rowID,highlighRow) {

    if (rowID == 'footer') {
        // console.error('底部');
        return (<View style={{height:20}}></View>);
    }

    return (
          <TouchableHighlight >
            <View style={styles.row}>
                <View style={styles.rowContent}>
                  <Text style={styles.rowTextLeft}>
                    {rowData.name}：
                  </Text>
                  <Text style={styles.rowTextRight}>
                    {rowData.value}
                  </Text>
                </View>
                <View style={styles.rowLineContent}>
                  <View style={styles.rowLine}>
                  </View>
                </View>
            </View>
          </TouchableHighlight>
    );
  }

  _renderSeparator(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
    return (
        <View key={`{sectionID}-${rowID}`} style={styles.rowLine}>
        </View>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView style={styles.listView}
          dataSource={this.state.dataSource}
          renderRow={this.cellForRow}
          renderHeader={this.renderHeader.bind(this)}
          renderSectionHeader={this.sectionHeader.bind(this)}
          refreshControl={
            <RefreshControl refreshing={this.state.isRefreshing}
              onRefresh={this._headerRefresh.bind(this)}
              tintColor='#3399FF'
              title='正在加载数据'
              titleColor='#3399FF'
              colors={['#ff0000', '#00ff00', '#0000ff']}
              progressBackgroundColor='#3399FF'
            />
          }
        />
      </View>
    )
  }
}

  // 自定义样式
const styles = StyleSheet.create({
    container:{
      flex:1,
    },
    listView:{
      flex:1,
      backgroundColor:'lightgray',
    },
    renderHeader:{
      borderTopLeftRadius:4,
      borderTopRightRadius:4,
      marginTop:20,
      justifyContent:'flex-end',
      borderTopLeftRadius:4,
      borderTopRightRadius:4,
    },
    sectionHeader:{
      justifyContent:'flex-end',
      borderTopLeftRadius:4,
      borderTopRightRadius:4,
    },
    sectionHeaderContent:{
      borderTopLeftRadius:4,
      borderTopRightRadius:4,
      marginLeft:20,
      marginRight:20,
      backgroundColor:'white',
      overflow:'hidden'
    },
    sectionHeaderText:{
      fontSize:16,
      paddingTop:10,
      color:'#3399FF',
      textAlign:'center',
    },
    sectionHeaderLine:{
      height:2,
      marginTop:5,
      marginLeft:20,
      marginRight:20,
      marginBottom:5,
      backgroundColor:'#3399FF',
    },
    row:{
      minHeight:40,
      flexDirection:'column',
      justifyContent:'flex-start',
      alignItems:'stretch',
    },
    rowContent:{
      flex:1,
      paddingTop:10,
      paddingBottom:10,
      marginRight:20,
      marginLeft:20,
      flexDirection:'row',
      backgroundColor:'white',
      alignItems:'center',
    },
    rowTextLeft:{
      width:100,
      textAlign:'right',
      marginLeft:20,
      textAlign:'right',
      fontSize:14,
      color:'gray',
    },
    rowTextRight:{
      flex:1,
      fontSize:14,
      marginRight:20,
    },
    rowLineContent:{
      backgroundColor:'white',
      height:1,
      marginLeft:20,
      marginRight:20,
      alignItems:'stretch',
    },
    rowLine:{
      flex:1,
      backgroundColor:'gray',
      marginLeft:20,
      marginRight:20,
    }
});